<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	$("p").click(function(){
		//将当前点击对像转变颜色
		$(this).css('background','#c30b15').siblings().css('background','#cccccc');
		// 隐藏当前点击对象
		$(this).hide(10000);
	});
	});
	$(document).ready(function(){
		$("a").mouseenter(function(){
			alert("选择到了超级链接");
		});
	});
	
	
	$(document).ready(function(){
		$(".box1").click(function(){
			$(this).toggle(1000);
		});
		$(".box2").click(function(){
			$(".box2").fadeTo("faster",0.1);
		});
	});
	
	$(document).ready(function(){
		$("img").click(function(){
			$(".img1").fadeToggle(1000);
		});
	});
	
	$(document).ready(function(){
		$(".img1").mouseenter(function(){
			$(".box1").hide(1000,function(){
				alert("你成功隐藏了一个小方块");
			})
		});
	});
</script>
<style>
	.box1{
		width: 100px;
		height: 100px;
		background-color: aqua;
	}
	.box2{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
	img{
		position: absolute;
	}
	
</style>
</head>
	<body>
		<p>如果你点我，我就会消失。</p>
		<p>继续点我!</p>
		<p>接着点我!</p>
		<p class="q">这是一个测试</p>
		<a href="https://www.baidu.com/">百度链接</a>
		<div class="box1">
			
		</div>
		<div class="box2">
			
		</div>
		<div class="box3">
	
			<img class="img2" src="img/gray.gif" />
			<img class="img1" src="img/lAHPD3zUNC9OEMzMtG0_109_180.gif" />
		</div>
	</body>
</html>